<!DOCTYPE html>
<html>
<style>
	body{font-family: "Microsoft YaHei",serif;}
	body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
	ol,ul,li{margin:0;padding:0;list-style:none;}
	img{border:none;}

	#wrap{
		position: relative;
		width: 1095px;
		height: 540px;
		margin:50px auto 0;
		user-select: none;
	}
	#wrap .leftTAb{
		width: 135px;
		height: 100%;
	}
	#wrap .leftTAb>li{
		height: 135px;
		line-height: 135px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		border-radius: 50%;
		background-color: #beedc7;
	}
	#wrap .leftTAb>li+li{
		margin-top:50px;
	}
	#wrap .leftTAb>li.on{
		background-color: #ECAD9E;
	}
	#wrap .right{
		position: absolute;
		right: 0;
		top:0;
		width: 960px;
		height: 540px;
	}
	/*图片列表控制*/
	#wrap .right div.img{
		display: none;
	}
	#wrap .right div.on{
		display:block;
	}
	/*图片控制*/
	#wrap .right img{
		display:none;
		width: 960px;
		height: 540px;
	}
	#wrap .right img.on{
		display: block;
	}
	#wrap .right .tab{
		position: absolute;
		height: 60px;
		bottom: 0;
		left: 10px;
		cursor: pointer;
	}
	#wrap .right .tab>li{
		float:left;
		width: 50px;
		line-height: 50px;
		margin-left: 20px;
		background-color: rgba(0,0,0,0.4);
		color: white;
		text-align: center;
	}
	#wrap .right .tab>li.on{
		border-radius: 50%;
		background-color: rgba(0,0,0,0.8);
	}
</style>
<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="wrap">
			<ul class="leftTAb">
				<li class="on">故宫</li>
				<li>稻城</li>
				<li>雅鲁藏布河</li>
			</ul>
			<div class="right">
				<div class="img on">
					<ul class="imgList">
						<li><img src="img/g1.jpg" alt="" class="on"></li>
						<li><img src="img/g2.jpg" alt=""></li>
						<li><img src="img/g3.jpg" alt=""></li>
						<li><img src="img/g4.jpg" alt=""></li>
					</ul>
					<ul class="tab">
						<li class="on">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
				</div>
				<div class="img">
					<ul class="imgList">
						<li><img src="img/r1.jpg" alt="" class="on"></li>
						<li><img src="img/r2.jpg" alt=""></li>
						<li><img src="img/r3.jpg" alt=""></li>
						<li><img src="img/r4.jpg" alt=""></li>
					</ul>
					<ul class="tab">
						<li class="on">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
				</div>
				<div class="img">
					<ul class="imgList">
						<li><img src="img/y1.jpg" alt="" class="on"></li>
						<li><img src="img/y2.jpg" alt=""></li>
						<li><img src="img/y3.jpg" alt=""></li>
						<li><img src="img/y4.jpg" alt=""></li>
					</ul>
					<ul class="tab">
						<li class="on">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
				</div>
			</div>
		</div>
		<script>
			
			
			
				let aLeft = document.querySelectorAll("#wrap .leftTAb>li"),
					aImgList = document.querySelectorAll(".imgList"),
					aTabList = document.querySelectorAll(".tab"),
					aRight = document.querySelectorAll("#wrap .img"),
					len = aLeft.length;
					index = 0;
					
					
					
					
					
                for(let i=0;i<len;i++){
					let aTab = aTabList[i].querySelectorAll("li"),
						aImg = aImgList[i].querySelectorAll("img"),
						len1 = aImg.length,
						index1 = 0;
					//左边选项卡
					aLeft[i].onclick = function(){
						if(i === index)return;
						aLeft[i].className = "on";
						aLeft[index].className = "";
						aRight[index].className = "img";
						aRight[i].className = "img on";
						index = i;
						
						//右侧对应内容归零
						aImg[index1].className = "";
						aTab[index1].className = "";
						index1 = 0;
						aImg[index1].className = "on";
						aTab[index1].className = "on";
					}
					//右边选项卡
					for(let i=0;i<len1;i++){
						aTab[i].onclick = function(){
							if(i === index1)return;
							aImg[index1].className = "";
							aTab[index1].className = "";
							index1 = i;
							aImg[index1].className = "on";
							aTab[index1].className = "on";
						};
					}
				}
		</script>
	</body>
</html>
